import { FC } from 'react';
import { Button, Form, Input, Select, Cascader, Tabs, Radio, Layout, Menu } from 'antd';
import { DingdingOutlined, CopyOutlined, SaveOutlined, FormOutlined } from '@ant-design/icons';
import styles from './addProject.less';
const { Content, Sider } = Layout;
import { IRouteComponentProps } from '@umijs/renderer-react';
const { TabPane } = Tabs;
import Editor from 'for-editor';
const tab = ['实训大纲', '实训任务', '项目资源', '实训环境', '前置项目']
const addIndustryTab: FC<IRouteComponentProps> = ({ location, history }) => {
    const Demo = () => (
        <Tabs defaultActiveKey="1" className={styles.Tabs}>
            <TabPane tab="实训大纲" key="1" >
                <Layout >
                    <Content >
                        <Layout >
                            <Sider className="site-layout-background" width={260}>
                                <Menu
                                    className={styles.ant_menu}
                                    mode="inline"
                                    defaultSelectedKeys={['1']}
                                    defaultOpenKeys={['sub1']}
                                    style={{ height: '100%' }}
                                >
                                    {/* {
                                        TrainingSyllabus.map((item, index) => {
                                            return <SubMenu key={index} title={item.label}>
                                                {
                                                    item.children.map((_item1: any, index1: any) => {
                                                        return <Menu.Item key={_item1.value}>{_item1.label}</Menu.Item>
                                                    })
                                                }
                                            </SubMenu>
                                        })
                                    } */}
                                </Menu>
                            </Sider>
                            <Content style={{ padding: '0 24px', minHeight: 280 }}>
                                <Editor placeholder="开始编辑..."
                                // value={title}
                                // onChange={(value) => { settitle(value); console.log(value) }} 
                                />
                            </Content>
                        </Layout>
                    </Content>
                </Layout>
            </TabPane>
            <TabPane tab="实训任务" key="2" >
                <Button type="primary">+添加任务</Button>
            </TabPane>
            <TabPane tab="项目资源" key="3">
                <Layout >
                    <Content >
                        <Layout >
                            <Sider className="site-layout-background" width={260}>
                                <Menu
                                    className={styles.ant_menu}
                                    mode="inline"
                                    defaultSelectedKeys={['1']}
                                    defaultOpenKeys={['sub1']}
                                    style={{ height: '100%' }}
                                >
                                    {/* {
                                        ProjectResourcesList.map((item, index) => {
                                            return <SubMenu key={index} title={item.label}>
                                                {
                                                    item.children.map((_item1: any, index1: any) => {
                                                        return <Menu.Item key={_item1.value}>{_item1.label}</Menu.Item>
                                                    })
                                                }
                                            </SubMenu>
                                        })
                                    } */}
                                </Menu>
                            </Sider>
                            <Content style={{ padding: '0 24px', minHeight: 280 }}>
                                <div className={styles.resource}>
                                    <div className={styles.resource_title}>
                                        <CopyOutlined />保存
                                  </div>
                                    <div className={styles.resource_content}>
                                        <div>
                                            <span>资源名称</span>
                                            <Input />
                                            <span>+</span>
                                            <span>-</span>
                                        </div>
                                        <div>
                                            <span>提交类型</span>
                                            <Radio>文件</Radio>
                                            <Button type="primary">+上传文件</Button>
                                        </div>
                                        <div>
                                            <Radio>链接</Radio>
                                            <Input placeholder='请输入链接地址' />
                                        </div>
                                        <div>
                                            <span>描述</span>
                                            <Input placeholder='请输入内容' />
                                        </div>
                                        <div>
                                            <span>教师</span>
                                            <Radio>可见</Radio>
                                            <Radio>可下载</Radio>
                                        </div>
                                        <div>
                                            <span>学生</span>
                                            <Radio>可见</Radio>
                                            <Radio>可下载</Radio>
                                            <Radio>不可见</Radio>
                                        </div>
                                    </div>
                                </div>
                            </Content>
                        </Layout>
                    </Content>
                </Layout>
            </TabPane>
            <TabPane tab="实训环境" key="4">
                <div className={styles.environment}>
                    <div className={styles.environment_title}>
                        <CopyOutlined />保存
                                  </div>
                    <div className={styles.environment_content}>
                        <div>
                            <span>环境名称</span>
                            <Input placeholder='请输入标题' />
                            <span>+</span>
                            <span>-</span>
                        </div>
                        <div>
                            <span>环境地址</span>
                            <Input placeholder='请输入外部链接地址' />
                            <span>+</span>
                            <span>-</span>
                        </div>
                        <div>
                            <span>环境描述</span>
                            <Input placeholder='请输入内容' />
                            <span>+</span>
                            <span>-</span>
                        </div>
                    </div>
                </div>
            </TabPane>
            <TabPane tab="前置项目" key="5">
                <div className={styles.lead}>
                    <div className={styles.lead_title}>
                        <CopyOutlined />保存
                    </div>
                    <div className={styles.lead_content}>
                        <p>添加与新项目关联的项目</p>
                        <div>
                            {/* <Cascader options={LeadProjectList} placeholder="Please select" className={styles.select} /> */}
                        </div>
                    </div>
                </div>
            </TabPane>
        </Tabs>
    );
    return <div> <Demo /></div>
}
export default addIndustryTab;